<template>
  <div class="home">

    <van-tabs v-model="active">
      <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
        <ArticleList :channel="channel" @show_more="handleShowMore" />
      </van-tab>
    </van-tabs>
    <!-- 频道列表开关 通过定位 -->
    <div class="bar-btn">
      <van-icon name="wap-nav" @click="showChannelEditFn" />
    </div>
    <!-- 弹出层1 -->
    <van-popup v-model="showMore" :style="{ width: '80%' }">
      <MoreAction ref="moreAction" @dislike="dislikeFn" @report="reportFn" />
    </van-popup>

    <!-- 弹出层2 -->
    <van-action-sheet v-model="showChannelEdit" title="标题">
      <div class="content">
        <ChannelEdit ref="channelEdit" :active="active" @clickMychannel="clickMychannelFn" />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { reqDislikeArticle, reqReportArticle } from '@/api/article'
import { mapActions, mapState } from 'vuex'
import ArticleList from './components/articleList.vue'
import MoreAction from './components/moreAction.vue'
import ChannelEdit from './components/channelEdit.vue'

export default {
  name: 'Home',
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data() {
    return {
      active: 0,
      showMore: false,
      articleId: null,
      showChannelEdit: false
    }
  },
  created() {
    this.getChannelsAsync()
    this.getAllChannelsAsync()
  },
  methods: {
    ...mapActions('channels', ['getChannelsAsync', 'getAllChannelsAsync']),

    handleShowMore(id) {
      // 文章id
      this.articleId = id
      // 弹出层1出现
      this.showMore = true
      // 异步更新dom  让页面关闭
      this.$nextTick(() => {
        this.$refs.moreAction.isReport = false
      })
    },

    async dislikeFn() {
      // 1.对不感兴趣的文章做了标记
      await reqDislikeArticle(this.articleId)
      // 2.关闭弹层
      this.showMore = false
      // 3.给每个子组件发送信息
      const obj = {
        articleId: this.articleId,
        channelId: this.channels[this.active].id
      }
      this.$eventBus.$emit('del_article', obj)
    },

    async reportFn(type) {
      // 发送举报请求
      await reqReportArticle(this.articleId, type)
      // 隐藏弹窗
      this.showMore = false
      // 删除文章
      const obj = {
        articleId: this.articleId,
        channelId: this.channels[this.active].id
      }
      this.$eventBus.$emit('del_article', obj)
    },

    clickMychannelFn(index) {
      this.active = index

      this.showChannelEdit = false
    },

    showChannelEditFn() {
      this.showChannelEdit = true
      this.$nextTick(() => {
        this.$refs.channelEdit.editing = false
      })
    }
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapState('channels', ['channels'])
  }
}
</script>

<style lang='scss' scoped>
.home {
  height: 100vh;
  padding-top: 46px + 44px;
  padding-bottom: 50px;
  box-sizing: border-box;

    ::v-deep {
      .van-tabs__line{
        background-color: #3196fa;
      }
      .van-tabs__wrap{
        position: fixed;
        left: 0;
        right: 30px;
        top: 46px;
      }
      .van-tabs {
        height: 100%;
        .van-tabs__content {
          height: 100%;
          .van-tab__pane{
            height: 100%;
          }
        }
      }

      .bar-btn {
      position: fixed;
      right: 5px;
      top: 57px;
      display: flex;
      align-items: center;
      background-color: #fff;
      opacity: 0.8;
      z-index:1;
        .van-icon-wap-nav{
          font-size: 20px;
        }
      }

    }
}
</style>
